<template>
	<div id="PLM" :style="{height: currHeight + 'px'}">
		<!-- 头部导航条 -->
		<div class="top_">
			<van-nav-bar title="个人信息" left-text="返回" left-arrow
			     @click-left="onClickLeft"
			     @click-right="onClickRight"
			>
			<template #right>
			    <van-icon name="ellipsis" size="18" />
			</template>
			</van-nav-bar>
		</div>

		<div class="count">
		<!-- 内容 -->
		<div class="center">
			<!-- 头像 -->
			<div class="head">
				<div class="head_text">头像</div>
				<div>
					<img class="lion" src="../assets/images/个人信息/个人信息(绑定手机）狮子_03.png">
					<img class="arrows" src="../assets/images/个人信息/个人信息(绑定手机）_03.png">
				</div>
			</div>
			<!-- 昵称 -->
			<div class="nickname">
				<div class="left_text">
					昵称 :
				</div>
				<input type="text">
			</div>
			<!-- 性别 -->
			<div class="sex">
				<div class="sex_text">性别 :</div>
				<div class="sex_log">
					<div>男</div>
					<img src="../assets/images/个人信息/个人信息(绑定手机）_03.png">
				</div>
			</div>
			<!-- 生日 -->
			<div class="nickname">
				<div class="left_text">
					生日 :
				</div>
				<input type="text">
			</div>
			<!-- 地区-->
			<div class="site">
				<div class="site_text">
					地址 :
				</div>
				<input type="text">
				<img src="../assets/images/个人信息/个人信息_11.png">
			</div>
			<!-- 手机 -->
			<div class="cell-phone">
				<div class="phone_left_text">
					手机 :
				</div>
				<div class="phone_left_text">
					159*******2011
				</div>
			</div>
			<!-- 身高 -->
			<div class="nickname">
				<div class="left_text">
					身高(cm):
				</div>
				<input type="text">
			</div>
			<!-- 体重 -->
			<div class="kg">
				<div class="kg_text">
					体重 (kg) :
				</div>
				<input type="text">
			</div>
		</div>
		<!-- 保存 -->
		<div class="save">
			<div>保存</div>
		</div>
	</div>
	</div>
</template>
<script>
	export default {
	data(){
		return{
		currHeight: '',
		}
	},
	 methods: { 
    onClickLeft() {
      
      this.$router.go(-1)
    },
    onClickRight() {
      
    },
  },
  mounted() {
  	this.currHeight = document.documentElement.clientHeight
  	window.onresize = () => {
  	this.currHeight = document.documentElement.clientHeight
  	}
  },
	};
</script>
<style scoped lang="less">
	#PLM{
		background: #eeeeee;
		width: 100%;
		// height: 2000px;
	}
.count{
	padding-top: 80px;
}
	// 内容
	.center {
		padding-left: 31px;
		margin-top: 20px;
		background: white;

		// 头像
		.head {
			width: 100%;
			height: 120px;
			box-sizing: border-box;
			padding-right: 21px;
			overflow: hidden;
			border-bottom: 1px solid #999999;
			display: flex;
			justify-content: space-between;

			.head_text {
				height: 24px;
				font-size: 26px;
				font-family: HiraginoSansGB;
				font-weight: normal;
				color: #333333;
				margin-top: 30px;
			}

			div {
				.lion {
					width: 80px;
					margin-right: 21px;
				}

				.arrows {
					width: 25px;
				}
			}
		}

		//昵称
		.nickname {
			background: white;
			width: 100%;
			height: 120px;
			box-sizing: border-box;
			padding-right: 21px;
			overflow: hidden;
			display: flex;
			justify-content:space-between;
			border-bottom: 1px solid #999999;

			.left_text {
				font-size: 26px;
				font-family: HiraginoSansGB;
				font-weight: normal;
				color: #333333;
				margin-top: 40px;
			}

			input {
				text-align: right;
				margin-left: 10px;
				width: 70%;
				height: 80%;
				border: none;
				margin-top: 2.7%;
			}
		}

		// 性别
		.sex {
			background: white;
			width: 100%;
			height: 120px;
			box-sizing: border-box;
			padding-right: 21px;
			overflow: hidden;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #999999;

			.sex_text {
				font-size: 26px;
				font-family: HiraginoSansGB;
				font-weight: normal;
				color: #333333;
				margin-top: 40px;
			}

			.sex_log {
				margin-top: 5%;
				display: flex;
				justify-content: space-between;

				div {
					font-size: 26px;
					font-family: HiraginoSansGB;
					font-weight: normal;
					color: #333333;
				}

				img {
					margin-top: 10px;
					margin-left: 20px;
					height: 28px;
				}
			}
		}

		//地址
		.site {
			background: white;
			width: 100%;
			height: 120px;
			box-sizing: border-box;
			padding-right: 21px;
			overflow: hidden;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #999999;

			.site_text {
				font-size: 26px;
				font-family: HiraginoSansGB;
				font-weight: normal;
				color: #333333;
				margin-top: 40px;
			}

			input {
				text-align: right;
				margin-left: 10px;
				width: 80%;
				height: 80%;
				border: none;
				margin-top: 2.7%;
			}

			img {
				height: 38px;
				margin-top: 45px;
			}
		}

		//手机
		.cell-phone {
			background: white;
			width: 100%;
			height: 120px;
			box-sizing: border-box;
			padding-right: 21px;
			overflow: hidden;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #999999;

			.phone_left_text {
				font-size: 26px;
				font-family: HiraginoSansGB;
				font-weight: normal;
				color: #333333;
				margin-top: 40px;
			}

			.phone_right_text {
				font-size: 26px;
				font-family: HiraginoSansGB;
				font-weight: normal;
				color: #333333;
			}
		}

		// 体重
		.kg {
			background: white;
			width: 100%;
			height: 120px;
			box-sizing: border-box;
			padding-right: 21px;
			overflow: hidden;
			display: flex;
			justify-content:space-between;

			.kg_text {
				font-size: 26px;
				font-family: HiraginoSansGB;
				font-weight: normal;
				color: #333333;
				margin-top: 40px;
			}

			input {
				text-align: right;
				margin-left: 10px;
				width: 70%;
				height: 80%;
				border: none;
				margin-top: 2.7%;
			}
		}
	}

	// 保存
	.save {
		width: 92%;
		margin: 0 auto;
		height: 101px;
		background: #234497;
		border-radius: 4px;
		margin-top: 9.6%;
		overflow: hidden;
		div {
			margin: 0 auto;
			margin-left: 45%;
			margin-top: 30px;
			font-size: 30px;
			font-family: HiraginoSansGB;
			font-weight: normal;
			color: #FFFFFF;
		}

	}
</style>
